<template>
  <div class="app-container">
    <el-card shadow="always">
      <el-form :model="queryParams" :inline="true" label-width="100px">
        <el-form-item label="网络制式：" prop="networkType">
          <el-select
            v-model="queryParams.networkType"
            placeholder="请选择网络制式"
            style="width: 240px"
          >
            <el-option
              v-for="dict in nhp_network_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区县：" prop="county">
          <el-select
            v-model="queryParams.county"
            placeholder="请选择所属区县"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in nhp_county_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="GGI：" prop="cgi">
          <el-input
            v-model="queryParams.cgi"
            placeholder="请输入CGI"
            clearable
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="小区名称：" prop="cellName">
          <el-input
            v-model="queryParams.cellName"
            placeholder="请输入小区名称"
            clearable
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="创建时间：" prop="createTime">
          <el-date-picker
            v-model="queryParams.createStartEnd"
            type="daterange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="listStationSummary"
            >查询</el-button
          >
          <el-button @click="unsetQueryForm"
            ><el-icon>
              <RefreshRight /> </el-icon
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card
      shadow="always"
      style="margin-top: 10px; min-height: 500px; padding-bottom: 20px"
    >
      <el-row>
        <el-button type="primary" icon="Download" @click="exportData"
          >导出</el-button
        >
      </el-row>
      <div id="table" style="margin-top: 20px">
        <el-table
          v-loading="loading"
          ref="qualityTable"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="county"
            label="所属区县"
            width="100"
            align="center"
            fixed
          />
          <el-table-column
            prop="cgi"
            label="CGI"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="neName"
            label="小区名称"
            width="200"
            align="center"
            fixed
          />
          <el-table-column
            prop="insertTime"
            label="创建日期"
            :formatter="dateFormatter"
            width="120"
            fixed
            align="center"
          />
          <el-table-column
            prop="status"
            label="状态"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-tag
                :type="scope.row.status == '1' ? 'success' : 'danger'"
                disable-transitions
                >{{ scope.row.status == "1" ? "正常" : "异常" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="quality"
            label="网络质量"
            width="150"
            align="center"
          />
          <el-table-column
            prop="alarm"
            label="故障告警"
            width="150"
            align="center"
          />
          <el-table-column
            prop="env"
            label="基站环境"
            width="150"
            align="center"
          />
          <el-table-column
            prop="profit"
            label="价值收益"
            width="150"
            align="center"
          />
          <el-table-column
            prop="perception"
            label="用户感知"
            width="150"
            align="center"
          />
          <el-table-column
            fixed="right"
            prop="total"
            label="健康度总分"
            width="150"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="200"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="showHealthDetail(scope.row.cgi, scope.row.insertTime)"
                >详情</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="linkToGis(scope.row.cgi)"
                >跳转GIS</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="listProfitTable"
          @current-change="listProfitTable"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup name="stationHealth">
import {
  queryStationSummaryList,
  queryStationSummary,
} from "@/api/biz/stationHealth";

const { proxy } = getCurrentInstance();
const { nhp_county_type, nhp_network_type } = proxy.useDict(
  "nhp_county_type",
  "nhp_network_type"
);
const router = useRouter();

const queryParams = ref({
  networkType: "5G",
});

const pageSize = ref(10);
const currentPage = ref(1);
const total = ref(0);
const tableData = ref([]);

function listStationSummary() {
  const param = {};
  param.pageSize = pageSize.value;
  param.pageNum = currentPage.value;
  param.county = queryParams.value.county;
  param.cgi = queryParams.value.cgi;
  param.netType = queryParams.value.networkType;
  param.neName = queryParams.value.cellName;
  if (
    queryParams.value.createStartEnd &&
    queryParams.value.createStartEnd.length > 0
  ) {
    param.startTime = queryParams.value.createStartEnd[0].toLocaleDateString();
    param.endTime = queryParams.value.createStartEnd[1].toLocaleDateString();
  }
  queryStationSummaryList(param).then((res) => {
    tableData.value = res.rows;
    total.value = res.total;
  });
}

function showHealthDetail(cgi, insertTime) {
  let temp = dateFormatter(null, null, insertTime, null);
  router.push({
    path: "/health/stationHealthDetail",
    query: { cgi: cgi, insertTime: temp },
  });
}

function linkToGis(cgi, insertTime) {
  router.push({
    path: "/gis",
    query: { cgi }, // 请求参数在这
  });
}

function dateFormatter(row, column, cellValue, index) {
  if (!cellValue) {
    return;
  }
  // 创建一个新的 Date 对象
  var originalDate = new Date(cellValue);

  // 获取年、月、日、时、分、秒
  var year = originalDate.getFullYear();
  var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
  var day = ("0" + originalDate.getDate()).slice(-2);
  var hours = ("0" + originalDate.getHours()).slice(-2);
  var minutes = ("0" + originalDate.getMinutes()).slice(-2);
  var seconds = ("0" + originalDate.getSeconds()).slice(-2);

  // 格式化输出
  var formattedDateTimeString = year + "-" + month + "-" + day;
  return formattedDateTimeString;
}

listStationSummary();
</script>
